<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/com.css">
    <title></title>
</head>
<body>
<div class="my-head">
    <div class="container">
        <div class="col-sm-4">
            <img  class="index-log" src="../../images/index-logo.png">
        </div>
        <div class="col-sm-4 col-sm-push-4 index-hr">
            <div class="col-xs-6 col-xs-pull-1" >
                <form class="form-horizontal">
                    <div class="form-group index-hr-pd">
                        <div class="input-group ver-cen-pad" id="head-input-box">
                            <label for="index-search"class="sr-only">Search</label>
                            <input id="index-search" class="form-control" type="text">
                            <div class="input-group-btn index-search-icon"><button type="submit" class="btn" ><img class="search-btn" src="../../images/search-icon.png"></button></a></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-xs-6 index-hr-pd ab-l">
                <ul class="nav nav-tabs user-login-box">
                    <li role="presentation" class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                            <img src="../../images/user-hd-img.png">
                            <span id="user-name">王晓华</span>
                            <span class="caret"></span></span>
                        </a>
                        <div class="dropdown-menu">
                            <a href="#" class="list-group-item user-center-page">个人主页</a>
                            <a href="#" class="list-group-item user-set">账号设置</a>
                            <a href="#" class="list-group-item user-qus">常见问题</a>
                            <a href="#" class="list-group-item user-login-out">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="source-study">
    <div class="container">
        <div class="row">
            <div class="col-md-3 source-left">
                <h4>设计与发现</h4>
                <p>设计是把一种计划、规划、设想通过某种形式传达出来的活动过程。人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。设计便是造物活动进行预先的计划，可以把任何造物活动的计划技术和计划过程理解为设计。</p>
                <ul class="list-group">
                    <li><span>课时总数</span><span class="source-total">10课时</span></li>
                    <li class="add-pad-ss"><span>主讲老师</span><span class="source-teacher">任老师</span></li>
                </ul>
                <div class="" style="margin-top: 10px;">
                    <ul class="nav nav-pills nav-stacked" id="course-study-nav">
                        <li class="active"><a href="#study-progress" aria-controls="study-progress" data-toggle="tab">课时列表</a></li>
                        <li><a href="#home-work" data-toggle="tab">课后作业</a></li>
                        <li><a href="#diploma" data-toggle="tab">结业证书</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-9 source-right">
                <div class="tab-content">
                    <div class="tab-pane fade in" id="study-progress">
                        <h4>学习进度</h4>
                        <div class="col-sm-11 progress-box">
                            <div class="progress">
                                <span class="progress-end"></span>
                                <div class="progress-bar" aria-valuemax="100" style="width: 50%">
                                    <span class="cur-progress">50%</span>
                                    <span class="progress-start"></span>
                                    <span class="progress-cur"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-1 total-source">10课时</div>
                        <div class="list-group source-list">
                            <a href="#" class="list-group-item learned"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item learned"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                            <a href="#" class="list-group-item learned"><button class="btn view-source-btn">开始学习</button><span class="source-name">课时3</span><p>像素闹哪样<br><span>人类通过劳动改造世界，创造文明，创造物质财富和精神财富，而最基础、最主要的创造活动是造物。</span></p></a>
                        </div>
                    </div>
                    <div class="tab-pane active fade in" id="home-work">
                        <div class="home-box">
                            <h4 class="home-title">课时 1<strong>图层样式的应用</strong></h4>
                            <ul class="list-group lsit-l-1">
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明</span>
                                        <span class="label label-info home-label">未提交</span>
                                        <div class="home-btns"><a class="btn btn-default do-home-w">写作业</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status cur-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                            <span class="left-time">剩 20 天</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span class="home-status e-comment-s">互评阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明</span>
                                        <span class="label label-info home-label">未提交</span>
                                        <div class="home-btns"><a class="btn btn-default do-home-w">查看详情</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span class="home-status cur-status e-comment-s">互评阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                            <span class="left-time">剩 20 天</span>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明</span>
                                        <span class="label label-info home-label">未提交</span>
                                        <div class="home-btns"><a class="btn btn-default do-home-w">做作业</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="home-box">
                            <h4 class="home-title">课时 1<strong>图层样式的应用</strong></h4>
                            <ul class="list-group lsit-l-1">
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明<span class="home-final-score">60分</span></span><!-- 添加分数时 分数是title 的子元素  -->

                                        <div class="home-btns"><a class="btn btn-default home-over-btn">已结束</a><a class="btn btn-default do-home-w">查看详情</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span class="home-status e-comment-s">互评阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明</span>
                                        <span class="label label-info home-label">未提交</span>
                                        <div class="home-btns"><a class="btn btn-default do-home-w">做作业</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span class="home-status e-comment-s">互评阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明</span>
                                        <span class="label label-info home-label f-w-score">等待成绩</span>
                                        <div class="home-btns"><a class="btn btn-default do-home-w">做作业</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="home-box">
                            <h4 class="home-title">课时 1<strong>图层样式的应用</strong></h4>
                            <ul class="list-group lsit-l-1">
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明<span class="home-final-score">60分</span></span><!-- 添加分数时 分数是title 的子元素  -->

                                        <div class="home-btns"><a class="btn btn-default home-over-btn">已结束</a><a class="btn btn-default do-home-w">查看详情</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span class="home-status e-comment-s">互评阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明</span>
                                        <span class="label label-info home-label">未提交</span>
                                        <div class="home-btns"><a class="btn btn-default do-home-w">做作业</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span class="home-status e-comment-s">互评阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-group-item">
                                    <h5 class="clearfix item-title-wrap">
                                        <span class="item-title">《设计与发现》 中期作业说明</span>
                                        <span class="label label-info home-label f-w-score">互评中</span>
                                        <div class="home-btns"><a class="btn btn-default do-home-w">做作业</a></div></h5>
                                    <ul class="list-group list-l-2">
                                        <li class="list-group-item">
                                            <span class="home-status r-commit-s">提交阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                        </li>
                                        <li class="list-group-item">
                                            <span class="home-status cur-status e-comment-s">互评阶段</span>
                                            <span class="home-end-time">截止时间 2016 - 04 - 14  12 : 31</span>
                                            <span class="left-time">剩 20 天</span>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="diploma">
                        <div class="row diploma-top">
                            <h4 class="diploma-top-title">证书获得条件</h4>
                            <section class="diploma-top-content">
                                <p class="desc">待定<br>结业后符合结业条件，电子版结业证书（免费）将发送至您的邮箱<br>您也可以申请纸质证书<br>纸质证书费： <span>10元</span><br>申请成功后,我们会将纸质证书通过EMS邮件方式邮寄给你。
                                </p>
                                <button class="btn btn-apply-diploma">申请纸质证书</button>
                                <p>（包邮范围只限定在中国大陆）</p>
                                <img src="../../images/diploma-exp.jpg" alt="diploma-exp"/>
                            </section>
                        </div>
                        <div class="row diploma-bottom">
                            <h4 class="diploma-bottom-title">请填写您的真实信息以证明您的努力</h4>
                            <form class="form-horizontal text-left">
                                <div class="form-group">
                                    <label for="real-name" class="control-label col-md-2">真实姓名</label>
                                    <div class="col-md-10">
                                        <input id="real-name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="real-addr" class="control-label col-md-2">接受证书地址</label>
                                    <div class="col-md-10">
                                        <input id="real-addr">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="real-pho" class="control-label col-md-2" >联系电话</label>
                                    <div class="col-md-10">
                                        <input id="real-pho">
                                    </div>
                                </div>
                                <p>纸质证书费： <span>10元</span><br>申请成功后,我们会将纸质证书通过EMS邮件方式邮寄给你。</p>
                                <button type="submit" class="btn submit-apply">立即申请</button>
                                <p>（包邮范围只限定在中国大陆）</p>
                            </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <h4 class="foot-title">联系方式</h4>
                <ul class="my-list foot-list">
                    <li>010-5653 8600</li>
                    <li>北京市朝阳区大屯东路名人公寓</li>
                    <li>media@zhigan-mail.com</li>
                </ul>
                <h5 class="foot-title-se">中国青少年科技辅导员协会 合作网站</h5>
                <p class="foot-clr">Copyright 2015 备案号 京备2016123445678899</p>
            </div>
            <div class="col-md-3">
                <div class="col-xs-10">
                    <img src="../../images/index-wc-icon.png">
                    <a class="back-top" href="#"></a>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script>
    $(function(){
        $(".source-detail-p1 .media-body a").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
        });
        $(".ques-list li").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("active").siblings().removeClass("active");
        });
        $(".user-collect").click(function(){
            $(this).toggleClass("collect")
        });
        $(".user-like").click(function(){
            $(this).toggleClass("like");
        });
        $(".q-d-box").click(function(){
            $(this).toggleClass("active");
        });
        $(".source-key-box .list-group-item").click(function(){
            var evt = window.event || arguments.callee.caller.arguments[0];
            evt.preventDefault();
            $(this).addClass("click").siblings().removeClass("click");
        });

        $("#course-study-nav li").hover(function () {
            $(this).addClass("choosed");

        },function(){
            $(this).removeClass("choosed");
        });
    });
</script>
</body>
</html>